const { resolve } = require('path')
const { merge } = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMiniMizerPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const NODE_ENV = process.env.NODE_ENV;

// 公共配置
const CommonConfig = {
    entry: resolve(__dirname, './src/main.js'),
    resolve: {
        extensions: ['.js', '.sass', '.scss']
    },
    output: {
        path: resolve(__dirname, './build/'),
        filename: 'js/[name].js',
        chunkFilename: 'js/[name]-chunk.js',
        assetModuleFilename: 'assets/[name][ext]',
        clean: true
    },
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.(jpe?g|png|gif)/,
                        exclude: /node_modules/,
                        type: 'asset/resource'
                    },
                    {
                        test: /\.js?$/,
                        include: resolve(__dirname, './src/'),
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                            cacheCompression: false
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve(__dirname, './src/index.html'),
            minify: false,
            inject: 'body',
            hash: true
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups:{
                react:{
                    test:/[\\/]node_modules[\\/]react(.*)?[\\/]/,
                    name:'vendor-react',
                    priority:40
                },
                lib:{
                    test:/[\\/]node_modules[\\/]/,
                    name:'vendor-lib',
                    priority:10
                }
            }
        },
        runtimeChunk: {
            name: (entrypoint) => `runtime-${entrypoint.name}.js`
        }
    }
}
// 开发配置
const DevConfig = {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    devServer: {
        port: 3400,
        open: true,
        hot: true,
        compress: true,
        watchFiles: [resolve(__dirname, './src/index.html')],
        historyApiFallback: true // 解决前端路由刷新之后404问题
    },
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.s[ac]ss$/,
                        exclude: /node_modules/,
                        use: ['style-loader', 'css-loader', 'sass-loader']
                    }
                ]
            }
        ]
    }
}
// 打包配置
const ProdConfig = {
    mode: 'production',
    devtool: 'source-map',
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.s[ac]ss$/,
                        exclude: /node_modules/,
                        use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader','sass-loader']
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles/[name].css'
        })
    ],
    optimization: {
        minimizer: [
            new CssMiniMizerPlugin(),
            new TerserWebpackPlugin()
        ]
    }
}

module.exports = NODE_ENV === 'development' ? merge(DevConfig, CommonConfig) : merge(ProdConfig, CommonConfig)